import { Outlet, Link } from 'react-router-dom';
import { Layout, Typography, Row, Col, Space } from 'antd';
import { MailOutlined } from '@ant-design/icons';
import Navbar from './components/Navbar';

const { Content, Footer } = Layout;
const { Title, Text } = Typography;

/**
 * 应用程序主组件
 * 包含导航栏、主要内容区域和页脚
 */
function App() {
  const quickLinks = [
    { path: '/', label: '首页' },
    { path: '/articles', label: '我的文章' },
    { path: '/life', label: '生活点滴' },
    { path: '/notes', label: '学习笔记' },
    { path: '/projects', label: '个人项目' },
    { path: '/about', label: '关于我' },
  ];

  return (
    <Layout className="min-h-screen" style={{ overflowX: 'hidden' }}>
      <Navbar />
      <Content className="pt-16 md:pt-16" style={{ flex: '1 0 auto' }}>
        <Outlet />
      </Content>
      <Footer style={{ background: '#1f2937', padding: '48px 0 24px',marginTop: '20px' }}>
        <div className="container mx-auto px-6">
          <Row gutter={[48, 32]} justify="center">
            <Col xs={24} sm={12} md={8}>
              <Text style={{ color: '#9ca3af' }}>
                记录学习，分享生活。
              </Text>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Title level={5} style={{ color: 'white', marginBottom: '20px' }}>快速链接</Title>
              <ul className="space-y-2">
                {quickLinks.map(link => (
                  <li key={link.path}>
                    <Link to={link.path} style={{ color: '#9ca3af', textDecoration: 'none' }} className="hover:text-white">
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </Col>
            <Col xs={24} sm={12} md={8}>
              <Title level={5} style={{ color: 'white', marginBottom: '20px' }}>联系我</Title>
              <a href="mailto:123456.com" style={{ color: '#9ca3af', fontSize: '16px' }} className="hover:text-white">
                <MailOutlined style={{ marginRight: '8px' }} />
                123456.com
              </a>
            </Col>
          </Row>
          <div style={{ borderTop: '1px solid #374151', marginTop: '32px', paddingTop: '24px', textAlign: 'center' }}>
            <Text style={{ color: '#9ca3af' }}>© 版权归作者本人所有</Text>
          </div>
        </div>
      </Footer>
    </Layout>
  )
}

export default App;
